<template>

  <view class="index">
    <nut-navbar :title="titleBind" @click-title="toHome" @click-back="back" v-bind:left-show="!isHome">
    </nut-navbar>
    <view v-if="active == 0">
      <nut-cell title="人生红墙" :desc="today.getMonth() + 1 + '月'"></nut-cell>


      <nut-row type="flex" justify="center">
        <nut-col :span="2"></nut-col>
        <nut-col :span="20">
          <div class="red-wall">
            <p>{{ wall_text }}</p>
          </div>
        </nut-col>
        <nut-col :span="2"></nut-col>
      </nut-row>

      <nut-divider />
      <nut-row type="flex" justify="center">
        <nut-col :span="2"></nut-col>
        <nut-col :span="20">

          <div class="number-display">
            <p class="number-text">{{ lunar ? lunar.match('GregorianDateTime=([^,]+)')[1].split('-')[2] : today.getDate() }}</p>
            <p>{{ lunar ? lunar.match('TianGanDiZhiYear=([^,]+)')[1] + lunar.match('LYear=([^,]+)')[1]  + '年':'' }}</p>
            <p>{{ lunar ? lunar.match('LMonth=([^,]+)')[1] + lunar.match('LDay=([^,]+)')[1]:'' }}</p>
          </div>

        </nut-col>
        <nut-col :span="2"></nut-col>
      </nut-row>

      <nut-row type="flex" justify="center">
        <nut-col :span="2"></nut-col>
        <nut-col :span="20">

          <div class="word-paragraph">
            <span>{{ lunar?'宜':''}}</span>
            <p class="word-text">
              {{ lunar ? lunar.match('Yi=([^,]+)')[1] : '创造力是成功的关键。' }}</p>
          </div>
        </nut-col>
        <nut-col :span="2"></nut-col>
      </nut-row>
      <nut-row type="flex" justify="center">
        <nut-col :span="2"></nut-col>
        <nut-col :span="20">
          <div class="word-paragraph">
            <span>{{ lunar?'忌':''}}</span>
            <p class="word-text"> {{ lunar ? lunar.match('Ji=([^,]+)')[1] : '让我们超越常规，探索无限的可能性。' }}</p>
          </div>
        </nut-col>
        <nut-col :span="2"></nut-col>
      </nut-row>
      <br />
      <nut-divider />

    </view>
    <Bmi v-if="active == 1"></Bmi>
    <reLive v-if="active == 2"></reLive>



  </view>
  <nut-tabbar v-model="active" bottom safe-area-inset-bottom placeholder :before-switch="sw">
    <nut-tabbar-item tab-title="日读">
      <template #icon>
        <Home></Home>
      </template>
    </nut-tabbar-item>
    <nut-tabbar-item tab-title="浮生">
      <template #icon>
        <Category></Category>
      </template>
    </nut-tabbar-item>
    <nut-tabbar-item tab-title="余生">
      <template #icon>
        <My2></My2>
      </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro, { useLoad } from '@tarojs/taro'
// import { ShareN } from '@nutui/icons-vue-taro'
import { Home, Category, Find, My2 } from '@nutui/icons-vue-taro'
import Bmi from '../bmi/bmi.vue'
import reLive from '../re-live/re-live.vue'
const wall_text = ref('人民英雄们永垂不朽')

const lunar = ref("")

useLoad(() => {
  Taro.request({
    url: 'https://www.love-moon.site/mini-ai-site/lunar/lucky-today', method: 'GET', success: function (res) {
      lunar.value = res.data.data
    }
  })
})


const isHome = ref(true)
const today = new Date()
const active = ref(0)
const lastActive = ref(0)

const titleBind = ref('RED WALL')
function toHome() {
  active.value = 0
  isHome.value = true
}

function back() {
  active.value = lastActive.value
  isHome.value = active.value === 0 ? true : false
  setTitle(active.value)
}

// function showShare(){
//   Taro.showShareMenu({
//   })
// }


const setTitle = (at: number) => {
  switch (at) {
    case 0: titleBind.value = 'RED WALL'; break;
    case 1: titleBind.value = 'BMI 计算器'; break;
    case 2: titleBind.value = '余生计算器'; break;
    default: titleBind.value = 'RED WALL'; break;
  }
}

const sw = (_: any, index: string | number) => {
  lastActive.value = active.value
  isHome.value = Number(index) === 0 ? true : false
  setTitle(Number(index))
  return index
}

</script>
